<template>
  <div class="index-content">
    <div class="index-body">
      <div class="tags-list">
        <div
          :class="item.isChecked ? 'isChecked' : ''"
          v-for="item in tagsList"
          :key="item.value"
          @click="selectTags(item)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="under-line"></div>
      <!-- 科目导航栏tabs -->
      <div class="index-subject">
        <SubOne v-if="checkedTagsValue == 1" :subject="1"></SubOne>
        <SubTwo v-if="checkedTagsValue == 2" :subject="1"></SubTwo>
        <SubTwo v-if="checkedTagsValue == 3" :subject="2"></SubTwo>
        <SubOne v-if="checkedTagsValue == 4" :subject="2"></SubOne>
      </div>
      <div class="service" v-if="service_phone != null">
        <el-popover  placement="left" width="200" trigger="hover">
          <div style="padding: 4vh 2vw; background-color: #2AC092; color: #fff; font-size: 16px; text-align: center;">
            <div>客服咨询</div>
            <div>{{ service_phone }}</div>
          </div>
          <img slot="reference" class="service-img" src="@/assets/kf.png" alt="" />
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import SubOne from "@/components/index/subjectOne.vue";
import SubTwo from "@/components/index/subjectTwo.vue";
import { getServicePhone } from '@/api/index.js'
export default {
  name: "index",
  components: {
    SubOne,
    SubTwo
  },
  data() {
    return {
      checkedTagsValue: 1,
      service_phone:'',
      tagsList: [
        {
          value: 1,
          name: "科目一",
          isChecked: true,
        },
        {
          value: 2,
          name: "科目二",
          isChecked: false,
        },
        {
          value: 3,
          name: "科目三",
          isChecked: false,
        },
        {
          value: 4,
          name: "科目四",
          isChecked: false,
        },
      ],
    };
  },
  mounted(){
    if(this.$route.query.type){
      this.checkedTagsValue = this.$route.query.type
      this.tagsList.forEach((ele) => {
        ele.isChecked = false;
        if(ele.value == this.$route.query.type){
          ele.isChecked = true
        }
      })
    }
    this.getServicePhone()
  },
  methods: {
    selectTags(item) {
      this.tagsList.forEach((ele) => {
        ele.isChecked = false;
      });
      item.isChecked = true;
      this.checkedTagsValue = item.value;
    },
    // 获取服务电话
    getServicePhone(){
      let that = this
      getServicePhone().then(res=>{
        // console.log(9,res)
        that.service_phone = res.data.service_phone
      })
    },
  },
};
</script>
<style scoped lang="scss">
.index-body {
  height: 89.3vh;

  .tags-list {
    display: flex;
    justify-content: space-between;
    font-size: 1.5vw;
    padding: 3.5% 12.5%;

    > div {
      background-color: #efefef;
      padding: 1% 5%;
      cursor: pointer;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      -khtml-user-select: none;
      user-select: none;
      border-radius: 40px;
    }
  }
}
.isChecked {
  color: #fff;
  background-color: #2ac092 !important;
}

.under-line {
  width: 100%;
  height: 1px;
  background: #e6e6e6;
}

.index-subject {
  padding: 0 12.5%;
}

.service {
  position: fixed;
  right: 10px;
  top: 50%;
  cursor: pointer;

  .service-img {
    width: 5vw;
    height: 10vh;
  }


  .service-popup{
    padding: 100px;
  }
}
</style>
